<template>
  <div class="index">
    <el-row style="margin-bottom: 1rem;">
      <!--    <el-card header="我的信息">-->
      <!--      <el-row :gutter="10">-->


      <!--        <el-form :form="user">-->
      <!--          <el-col :span="6">-->
      <!--            <el-form-item label="姓名">-->
      <!--              <el-input v-model="user.name"></el-input>-->
      <!--            </el-form-item>-->
      <!--          </el-col>-->
      <!--          <el-col :span="6">-->
      <!--            <el-form-item label="工号">-->
      <!--              <el-input v-model="user.name"></el-input>-->
      <!--            </el-form-item>-->
      <!--          </el-col>-->
      <!--          <el-col :span="6">-->
      <!--            <el-form-item label="职位">-->
      <!--              <el-input v-model="user.name"></el-input>-->
      <!--            </el-form-item>-->
      <!--          </el-col>-->
      <!--          <el-col :span="6">-->
      <!--            <el-form-item label="系统角色">-->
      <!--              <el-input v-model="user.role.introduction"></el-input>-->
      <!--            </el-form-item>-->
      <!--          </el-col>-->
      <!--          -->
      <!--          {{user}}-->
      <!--        </el-form>-->
      <!--      </el-row>-->
      <!--    </el-card>-->
    </el-row>
    <el-row class="header">
      <el-form :inline="true">
        <el-form-item label="日期">
          <el-date-picker v-model="workDate" @change="getData" :clearable="false"></el-date-picker>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="main">
      <el-col :span="12">
        <p>在职人数</p>
        <el-divider></el-divider>
        <p>
          <!--        <router-link to="/archivesmange/finUserRoster">-->
          <b v-text="onJobPeopleCount"></b>
          <!--        </router-link>-->
        </p>
      </el-col>
      <el-col :span="12">
        <p>今日打卡人数</p>
        <el-divider></el-divider>
        <p>
          <!--        <router-link to="/attendancemange/attendanceResultReport">-->
          <b v-text="onAttendanceCount"></b>
          <!--        </router-link>-->
        </p>
      </el-col>

    </el-row>
    <el-descriptions class="margin-top" title="我的信息" :column="4" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="editPassword"  v-if="$store.state.userInfo.first">修改密码</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          姓名
        </template>
        <span v-text="user.name"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          工号
        </template>
        <span v-text="user.jobNumber"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          职位
        </template>
        <span v-text="user.position"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          系统角色
        </template>
        <span v-text="user.role.introduction"></span>

      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          邮箱
        </template>

        <el-input v-model="user.email" v-if="isEdit"></el-input>
        <span v-text="user.email" v-else></span>

      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          上次登录IP
        </template>
        <span v-text="user.ip"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          上次登录时间
        </template>
        <span>{{ user.lastLoginTime|formatDate }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          是否首次登录
        </template>
        <span v-text="user.first?'是':'否'">
        </span>
      </el-descriptions-item>
    </el-descriptions>
    <el-drawer
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
      <div slot="title">
        <h3 v-text="userModel.name+'('+userModel.jobNumber+')'"></h3>
        <p style="font-size: 14px;color: red">密码仅允许修改一次，请记住自己密码</p>
      </div>
      <div style="padding:0 2rem;">
        <el-form>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="userModel.name"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="username">
            <el-input v-model="userModel.username"></el-input>
          </el-form-item>
<!--          <el-form-item prop="oldPassword">-->
<!--            <template slot="label">-->
<!--              <span>原密码</span><span v-show="isVerify===true" style="color: #67C23A;">（校验成功）</span> <span-->
<!--                v-show="isVerify===false" style="color: red;">（校验失败）</span>-->
<!--            </template>-->
<!--            <el-input v-model="oldPassword" @blur="verifyPassword" type="password"  show-password></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="newPassword" type="password"  show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="newPassword1">
            <template slot="label">
              <span>确认密码</span><span v-show="newPassword===newPassword1&&newPassword1!==null"
                                         style="color: #67C23A;">（校验成功）</span> <span
                v-show="newPassword!==newPassword1&&newPassword1!==null" style="color: red;">（校验失败）</span>
            </template>
            <el-input v-model="newPassword1" type="password"  show-password></el-input>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button @click="cancelOperation">取消
            </el-button>
            <el-button @click="updatePassword" :disabled="!(newPassword===newPassword1&&newPassword1!==null)" type="primary">确认
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import moment from "moment";

export default {

  name: "IndexComponent",
  data() {
    return {
      workDate: moment(new Date()).format("YYYY-MM-DD"),
      onJobPeopleCount: 0,
      onAttendanceCount: 0,
      user: this.$store.state.userInfo,
      isEdit: false,
      drawer: false,
      direction: 'rtl',
      oldPassword: null,
      newPassword: null,
      newPassword1: null,
      userModel: {},
      isVerify: true,

    }
  },
  created() {
    this.getOnJobPeopleCount();
    this.getOnAttendanceCount();
    this.drawer = this.$store.state.updatePasswordBoxShow || false;
    this.userModel = this.$store.state.userInfo;
  },
  methods: {
    getData() {
      this.getOnJobPeopleCount()
      this.getOnAttendanceCount()
    },
    getOnJobPeopleCount() {
      this.workDate = moment(this.workDate).format("YYYY-MM-DD")
      axios.get("/ding_users/count?archivesDate=" + this.workDate).then(res => {
        this.onJobPeopleCount = res.data.data
      })
    },
    getOnAttendanceCount() {
      this.workDate = moment(this.workDate).format("YYYY-MM-DD")
      axios.get("/ding_attendance_result/count?archivesDate=" + this.workDate).then(res => {
        this.onAttendanceCount = res.data.data
      })
    },
    editPassword() {
      this.userModel = this.$store.state.userInfo
      this.drawer = true
    },
    handleClose(done) {
/*      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });*/
    },
    verifyPassword() {
      if (this.oldPassword !== null && this.oldPassword !== undefined) {
        axios.post("/user/verifyPassword/" + this.oldPassword, this.userModel).then(res => {
          if (res.data.success) {
            // this.$tools.showMessage("验证成功！",)
            this.isVerify = true
          } else {
            this.isVerify = false
          }
        })
      }
    },
    updatePassword() {
      this.userModel.password = this.newPassword;
      this.userModel.id = this.user.id;
      axios.post("/user/update/password", this.userModel).then(res => {
        if (res.data.success) {
          this.$tools.showMessage("修改成功，请重新登录！", "success")
          this.user=res.data.data
          this.$store.commit("setUserInfo", res.data.data)
          this.$store.commit("setUpdatePasswordBoxShow",false)
          this.$router.push("/login")
          this.cancelOperation()
        } else {
          this.$tools.showMessage("修改失败", "error")
        }
      })
    },
    cancelOperation(){
      this.drawer = false
      this.oldPassword = null
      this.newPassword = null
      this.newPassword1 = null
      this.userModel = {}
      this.isVerify = null
    }


  }
}
</script>

<style lang="less">
.index {
  padding: 1rem;

  .header {
    .el-col {
      height: 5vh;
      text-align: center !important;
    }
  }

  .main {
    margin-bottom: 2rem;

    .el-col {
      border: 1px solid #cbccce;
      text-align: center !important;
    }
  }

}
</style>
